<template>
    <div class="app">
        <myNavbar title="评价"></myNavbar>
        <list>
            <cell>
                <div class="evaluation_product">
                    <div class="evaluation_logistics_titleBox">
                        <text class="evaluation_logistics_title">商品评价</text>
                    </div>
                    <div v-for="(item,index) in evaluationData">
                        <div class="evaluation_product_content">
                            <div class="evaluation_product_content_img">
                                <image :src="item.thumbnail" style="width:120px;height:120px"></image>
                            </div>
                            <div class="evaluation_product_content_column">
                                <text class="evaluation_product_content_title">{{item.name}}</text>
                                <text class="evaluation_product_content_subtitle">{{item.spec}}</text>
                            </div>
                        </div>
                        <div class="evaluation_product_evaluation">
                            <div class="evaluation_product_evaluation_row">
                                <icon :class="[indexs <= item.star?'evaluation_logistics_xingxing':'evaluation_logistics_no_xingxing']" v-for="(items,indexs) in icon" @click="productClick(index,indexs)" style="width: 50px;height:50px" content="tb-favor-fill-light"></icon>
                                <text>{{items}}</text>
                            </div>
                        </div>
                        <div class="evaluation_product_memo">
                            <textarea class="evaluation_product_memo_title" v-model="item.content" placeholder="您的商品的评价与建议，会让产品做得更好"></textarea>
                        </div>

                        <div class="evaluation_img">
                            <text class="evaluation_img_title">买家秀 (最多6张)</text>
                            <upload @metaClick="metaClick($event,index)"></upload>
                        </div>
                    </div>
                </div>
                <div class="evaluation_botton">
                    <div class="evaluation_botton_box botton_Bg_Color" @click="confirmClick">
                        <text class="evaluation_botton_box_title botton_Fz_Color">保存</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import {
        find
    } from '../../../api/order';
    import {
        save
    } from "../../../api/review"
    import upload from '../../../components/upload/upload.vue'
    export default {
        data(){
            return{
                textIndex: 0,
                icon: [false, false, false, false, false],
                evaluationData: [],
                id:'',
                metaForm:{},
                metaIndex:''
            }
        },
        created(){
            this.id = eeui.getPageInfo('orderDetails').params
            this.findClick(this.id)
        },
        components:{
            upload,myNavbar
        },
        methods:{
            findClick(data) {
                var _this = this
                console.log(data)
                find(data).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            res.data.order.itemList.forEach(function(item) {
                                var itemEvaluation = {
                                    content: '',
                                    itemList: [],
                                    name: item.name,
                                    orderId: item.orderId,
                                    price: item.price,
                                    productId: item.productId,
                                    quantity: item.quantity,
                                    spec: item.spec,
                                    star: 4,
                                    thumbnail: _this.thumbnail(item.thumbnail,120,120),
                                    unit: item.unit
                                }
                                _this.evaluationData.push(itemEvaluation)
                            })
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },

            productClick(index,indexs) {
                console.log(index)
                console.log(indexs)
                this.evaluationData[index].star = indexs
            },
            stars(data) {
                var starsTitle = '';
                if (data == 0) {
                    starsTitle = '非常差'
                } else if (data == 1) {
                    starsTitle = '差'
                } else if (data == 2) {
                    starsTitle = '一般'
                } else if (data == 3) {
                    starsTitle = '好'
                } else if (data == 4) {
                    starsTitle = '非常好'
                }
                return starsTitle
            },
            metaClick(data,index) {
                var _this = this
                _this.evaluationData[index].itemList = []
                if (data.images != []) {
                    data.images.forEach(function(item) {
                        var itemList = {
                            type: 1,
                            url: item
                        }
                        _this.evaluationData[index].itemList.push(itemList)
                    })
                }
                if (data.video != []) {
                    data.video.forEach(function(item) {
                        var itemList = {
                            type: 2,
                            url: item
                        }
                        _this.evaluationData[index].itemList.push(itemList)
                    })
                }
            },
            confirmClick() {
                var _this = this
                console.log(_this.evaluationData)
                save(JSON.stringify(_this.evaluationData)).then(res => {
                    if (res.type == 'success') {
                        eeui.closePage()
                        eeui.openPage({
                                pageName: 'orderDetails',
                                params: this.id,
                                url: 'root://pages/member/order/evaluation_confirm.js',
                                statusBarType: 'immersion',
                                statusBarStyle:false
                            },
                            (result) => {
                                console.log('成功')
                            }
                        );
                        storage.setItem('order', 'true', event => {
                            console.info('set success')
                        })
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .app,body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .evaluation_logistics {
        width: 700px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        padding: 40px 25px;
        box-sizing: border-box;
        margin-top: 25px;
    }

    .evaluation_logistics_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .evaluation_logistics_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 30px;
    }

    .evaluation_logistics_xingxingBox {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .evaluation_logistics_xingxing {
        font-size: 50px;
        font-weight: 400;
        color: #eb594f;
        line-height: 42px;
    }

    .evaluation_logistics_no_xingxing {
        font-size: 50px;
        font-weight: 400;
        color: #a2a2a2;
        line-height: 42px;
    }

    .evaluation_logistics_xingxingTitle {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .evaluation_product {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        padding: 40px 25px;
        box-sizing: border-box;
        margin-top: 25px;
    }

    .evaluation_logistics_titleBox {
        width: 700px;
        padding-bottom: 30px;
        border-bottom-color: rgba(232, 234, 237, 1);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .evaluation_logistics_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .evaluation_product_content {
        display: flex;
        margin-top: 60px;
        flex-direction: row;
    }

    .evaluation_product_content_img {
        width: 120px;
        height: 120px;
        background: rgba(249, 249, 249, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .evaluation_product_content_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
    }

    .evaluation_product_content_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        width: 500px;
    }

    .evaluation_product_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        display: block;
        margin-top: 8px;
        width: 500px;
    }

    .evaluation_product_evaluation {
        width: 700px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .evaluation_product_evaluation_row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .evaluation_product_memo {
        width: 650px;
        height: 168px;
        background-color: rgba(247, 247, 249, 1);
        border-radius: 4px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .evaluation_product_memo_title {
        width: 600px;
        height: 118px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        opacity: 0.3;
    }

    .evaluation_botton {
        width: 700px;
        border-radius: 16px;
        margin-left: 25px;
        padding: 40px 25px;
        box-sizing: border-box;
        margin-top: 25px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .evaluation_botton_box {
        width: 600px;
        height: 80px;
        opacity: 0.8;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .evaluation_botton_box_title{
        font-size:32px;
        font-weight:400;
    }
    .evaluation_img {
        /* width: 700px; */
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        box-sizing: border-box;
    }

    .evaluation_img_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        margin-bottom: 25px;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
